<!-- 模块说明 -->
<template>
    <van-nav-bar title="登录" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="big">
        <div class="logo">
            <img src="http://www.shujie.me/themes/classic/assets/images/jiushujie-logo.png" alt="">
        </div>
        <div class="input">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="ruleForm.phone" name="phone" colon="true" label="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请输入正确手机号' }]" />

                    <van-field :right-icon="passwordStatus ? 'eye' : 'closed-eye'"
                        :type="!passwordStatus ? 'password' : 'text'"
                        @click-right-icon="passwordStatus = !passwordStatus" v-model="ruleForm.password" name="password"
                        colon="true" label="密&emsp;码" placeholder="密码"
                        :rules="[{ required: true, message: '请输入正确密码' }]" />
                </van-cell-group>
                <div style="margin: 46px;">
                    <van-button text="#000" round block type="primary" color="#ccad74" native-type="submit"
                        @submit="onSubmit">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>

        <div class="double">
            <router-link to="/logon">
                <span>注册新用户</span>
            </router-link>

            <router-link to="">
                <span>忘记密码</span>
            </router-link>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const onClickLeft = () => history.back();
const passwordStatus = ref(false);
const ruleForm = reactive({
    phone: '',
    password: ''
})
const onSubmit = (values) => {
    store.dispatch('user/loginn', ruleForm).then(res => {
        console.log(res, '123')
    })
    // console.log(values, 'submit');
};
// onMounted(() => {
    
// })
</script>
<style lang="scss" scoped>
.big {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.logo {
    img {
        width: 60px;
        margin: 80px 0 50px 0;
        // height:30px;

    }

}

.input {
    display: flex;
    flex-direction: column;
    align-content: center;




    input {
        width: 260px;
        height: 40PX;
        border-radius: 30px;
        margin: 5PX 0 5px 0;
        border: 0.5px solid #a9a9a9;
    }

}

.login {
    display: flex;
    flex-direction: column;
    align-content: center;

    button {
        width: 260px;
        height: 40px;
        border-radius: 30px;
        margin: 20px 0;
    }
}

.double {

    font-size: 12px;
    width: 260px;
    display: flex;
    justify-content: space-between;

    span {
        color: #d3ab6d;

    }
}
</style>
